<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="iscroll.Veb.js"></script>
    <script src="vue.min.js"></script>
    <script src="goodList.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #bingo {
            width: 100%;

        }

        #bingo ul {
            width: 950px;
            margin: 0 auto;
        }

        #data {
            float: left;
            width: 200px;
            margin: 5px 10px;

        }

        #data h4 {
            text-align: center;

        }

        #data img {
            width: 200px;
            height: 200px;
        }

        li {
            list-style: none;
        }

        .clink {
            background: #eeeeee;
            border: 1px solid black;

        }
        #bottom{
            position: fixed;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            bottom: 50px;
            right: 20px;
            background: lightslategrey;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="bingo">
            <ul>
                <li class="clink" id="data" v-for="(item,index) in goodList">
                    <!-- :src="item.img_list_url" -->
                    <img v-lazy="item">
                    <h4>{{item.title}}</h4>
                </li>
            <div id="bottom" @click="top">回顶部</div>

            </ul>
        </div>


    </div>
</body>
<script>
    Vue.directive("lazy", {
        inserted: function (el, binding) {
            // 设置占位图
            el.style.background = "url(loading.gif) center center no-repeat";
            // 监听窗口滚动
            function createScroll() {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var offsetTop = el.offsetTop;
                var h = window.innerHeight;
                if (offsetTop <= scrollTop + h - 230) {
                    var img = new Image();
                    img.src = binding.value.img_list_url;

                    console.log(offsetTop, scrollTop, h);
                    img.onload = function () {
                        el.src = binding.value.img_list_url;
                        window.removeEventListener("scroll", createScroll);
                    }
                }
            }
            createScroll()
            window.addEventListener("scroll", createScroll)
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            goodList: goodList,

        },
        methods:{
            top:function(){
                document.documentElement.scrollTop=0;
                document.body.scrollTop=0;
            }
        }

    })
</script>

</html>